<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="form" :model="report" labelWidth="150px" :rules="rules">
				<!--
        <uni-forms-item label="收运时间(提交时间)" name="collectionDate">
          <uni-easyinput v-model="report.collectionDate" placeholder="请输入收运时间" />
        </uni-forms-item>	-->
				<uni-forms-item label="进库日期" name="recordDate">
					<uni-easyinput v-model="report.recordDate" placeholder="请输入进库日期" disabled="true" />
				</uni-forms-item>
				<uni-forms-item label="运输车辆车牌号" name="plateNumber">
					<!-- <uni-data-select v-model="report.plateNumber" :localdata="options" /> -->
					<ld-select :list="options1"
					                label-key="label" value-key="value"
					                placeholder="请选择"
					                clearable
					                v-model="report.plateNumber"
					                @change="selectChange1"></ld-select>
				</uni-forms-item>
				<uni-forms-item label="类型" name="reportType">
					<ld-select :multiple="true" :list="options2"
					                label-key="label" value-key="value"
					                placeholder="请选择"
					                clearable
					                v-model="reportTypeList"
									@change="selectChange2"></ld-select>
				</uni-forms-item>
				
				<uni-forms-item label="灶台油总量(公斤)" name="stoveQuantity" v-if="reportTypeList.includes('1')">
					<uni-number-box :max="9999" v-model="report.stoveQuantity" :step="0.01" />
				</uni-forms-item>
				<uni-forms-item label="灶台油含油率(%)" name="stoveOilRate" v-if="reportTypeList.includes('1')">
					<uni-number-box :max="100" v-model="report.stoveOilRate" :step="0.01" />
				</uni-forms-item>
				<!--        <uni-forms-item label="灶台油纯油量(公斤)" name="stovePureOil">-->
				<!--          <uni-number-box :max="9999" v-model="report.stovePureOil" :step="0.01"/>-->
				<!--        </uni-forms-item>-->
				<uni-forms-item label="灶台油扣渣量(公斤)" name="stoveResidue" v-if="reportTypeList.includes('1')">
					<uni-number-box :max="9999" v-model="report.stoveResidue" :step="0.01" />
				</uni-forms-item>
				<uni-forms-item label="地上油总量(公斤)" name="groundQuantity" v-if="reportTypeList.includes('2')">
					<uni-number-box :max="9999" v-model="report.groundQuantity" :step="0.01" />
				</uni-forms-item>
				<uni-forms-item label="地上油含油率(%)" name="groundOilRate" v-if="reportTypeList.includes('2')">
					<uni-number-box :max="100" v-model="report.groundOilRate" :step="0.01" />
				</uni-forms-item>
				<!--        <uni-forms-item label="地上油纯油量(公斤)" name="groundPureOil">-->
				<!--          <uni-number-box :max="9999" v-model="report.groundPureOil" :step="0.01"/>-->
				<!--        </uni-forms-item>-->
				<uni-forms-item label="地上油扣渣量(公斤)" name="groundResidue" v-if="reportTypeList.includes('2')">
					<uni-number-box :max="9999" v-model="report.groundResidue" :step="0.01" />
				</uni-forms-item>
				<uni-forms-item label="地下油总量(公斤)" name="undergroundQuantity" v-if="reportTypeList.includes('3')">
					<uni-number-box :max="9999" v-model="report.undergroundQuantity" :step="0.01" />
				</uni-forms-item>
				<uni-forms-item label="地下油含油率(%)" name="undergroundOilRate" v-if="reportTypeList.includes('3')">
					<uni-number-box :max="100" v-model="report.undergroundOilRate" :step="0.01" />
				</uni-forms-item>
				<!--        <uni-forms-item label="地下油纯油量(公斤)" name="undergroundPureOil">-->
				<!--          <uni-number-box :max="9999" v-model="report.undergroundPureOil" :step="0.01"/>-->
				<!--        </uni-forms-item>-->
				<uni-forms-item label="地下油扣渣量(公斤)" name="undergroundResidue" v-if="reportTypeList.includes('3')">
					<uni-number-box :max="9999" v-model="report.undergroundResidue" :step="0.01" />
				</uni-forms-item>
				
			</uni-forms>
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		addReport
	} from "@/api/system/report"
	import {
		formatDate
	} from '@/utils/common.js';
	import {
		getDicts
	} from "@/api/system/dict/data";
    import ldSelect from '@/components/ld-select/ld-select.vue'



	export default {
		components: {ldSelect},
		data() {
			return {
				value: "",
				options1: [],
				options2: [],
				// 表单校验
				rules: {
					plateNumber: {
						// rules: [{
						// 	required: true,
						// 	errorMessage: '请输入运输车辆车牌号',
						// }]
					}
				},
				report: {
					recordDate: "",
					plateNumber: "",
					groundQuantity: "",
					groundOilRate: "",
					groundPureOil: "",
					groundResidue: "",
					undergroundQuantity: "",
					undergroundOilRate: "",
					undergroundPureOil: "",
					undergroundResidue: "",
					stoveQuantity: "",
					stoveOilRate: "",
					stovePureOil: "",
					stoveResidue: "",
					reportType: "",
				},
				reportTypeList:[],
				columns: [
				        { label: "灶台油", value: "1" },
				        { label: "地上油", value: "2" },
				        { label: "地下油", value: "3" },
				],
			}
		},
		onLoad(options) {
			// 进库时间
			const formattedDate = formatDate(Date.now(), 'yyyy-MM-dd hh:mm:ss');
			this.report.recordDate = formattedDate;
			
			
			// 数据字典
			getDicts("sys_car_number").then(response => {
				this.options1 = response.data.map(item => ({
					value: item.dictValue,
					label: item.dictLabel
				}))
			})
			// 数据字典
			getDicts("fqyz_type").then(response => {
				this.options2 = response.data.map(item => ({
					value: item.dictValue,
					label: item.dictLabel
				}))
			})
		},
		methods: {
			// 提交数据
			submit(ref) {
				this.$refs.form.validate().then(res => {
					addReport(this.report).then(response => {
						if (response.code === 200) {
							uni.showToast({
								title: response.msg
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none'
							});
						}
					})
				})
			},
			confirm(data, value, label) {
			    console.log(data, value, label);
			},
			selectChange1(val){
			},
			selectChange2(val){
			    this.report.reportType = val.join(",");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>